<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                xmlns:c="http://java.sun.com/jsf/composite/componentes"
                template="../template.xhtml">
    <ui:define name="conteudo">
        <h:form prependId="false" styleClass="form-estilo" rendered="#{listarMembro.autorizar('PAPEL_EDITAR_MUSICA')}">
            <h2>Editar Música</h2>
            <fieldset>
                <legend>Detalhes</legend>
                <c:edicao controle="#{editarMusica}" textoBotaoVoltar="#{i18n.botao_voltar}" textoBotaoSalvar="#{i18n.botao_salvar}"/>
                <br/><br/>
                <h:panelGrid columns="3">
                    <h:panelGrid columns="2">
                        <h:outputLabel value="#{i18n.musica_nome}"/>
                        <h:inputText value="#{editarMusica.objeto.nome}" label="#{i18n.musica_nome}" required="true" requiredMessage="#{i18n.musica_nome_mensagem}" size="50"/>
                        <h:outputLabel value="#{i18n.musica_artista}"/>
                        <h:inputText value="#{editarMusica.objeto.artista}" required="true" requiredMessage="#{i18n.musica_artista_mensagem}" size="50"/>
                        <h:outputLabel value="#{i18n.musica_album}"/>
                        <h:inputText value="#{editarMusica.objeto.album}" required="true" requiredMessage="#{i18n.musica_algum_mensagem}" size="50"/>
                        <h:outputLabel value="#{i18n.musica_letra}"/>
                        <h:column>
                            <h:inputText value="#{editarMusica.objeto.letra}" size="50">
                                <f:ajax event="change" render="letra"/>
                            </h:inputText>
                            <h:outputLink id="letra" title="clique para abrir letra da música #{editarMusica.objeto.nome}" target="_blank" value="#{editarMusica.objeto.letra}">
                                <h:graphicImage rendered="#{editarMusica.objeto.letra != null}" value="#{resource['img:letra.png']}" style="border: 0px;"/>
                            </h:outputLink>
                        </h:column>
                        <h:outputLabel value="#{i18n.musica_slide}"/>
                        <h:column>
                            <h:inputText value="#{editarMusica.objeto.slide}" size="50">
                                <f:ajax event="change" render="slide"/>
                            </h:inputText>
                            <h:outputLink id="slide" title="clique para abrir slide da música #{editarMusica.objeto.nome}" target="_blank" value="https://docs.google.com/present/view?id=#{editarMusica.objeto.slide}">
                                <h:graphicImage rendered="#{editarMusica.objeto.slide != null}" value="#{resource['img:slide.png']}" style="border: 0px;"/>
                            </h:outputLink>
                        </h:column>
                        <h:outputLabel value="#{i18n.musica_video}"/>
                        <h:column>
                            <h:inputText value="#{editarMusica.objeto.video}">
                                <f:ajax event="change" render="video"/>
                            </h:inputText>
                            <h:outputLink id="video" title="clique para abrir video da música #{editarMusica.objeto.nome}" target="_blank" value="http://www.youtube.com/watch?v=#{editarMusica.objeto.video}">
                                <h:graphicImage rendered="#{editarMusica.objeto.video != null}" value="#{resource['img:video.png']}" style="border: 0px;"/>
                            </h:outputLink>
                        </h:column>

                        <h:outputLabel value="#{i18n.musica_cifra}"/>
                        <h:column>
                            <h:inputText value="#{editarMusica.objeto.cifra}" size="50">
                                <f:ajax event="change" render="cifra"/>
                            </h:inputText>
                            <h:outputLink id="cifra" title="clique para abrir cifra da música #{editarMusica.objeto.nome}" target="_blank" value="#{editarMusica.objeto.cifra}">
                                <h:graphicImage rendered="#{editarMusica.objeto.cifra != null}" value="#{resource['img:cifra.png']}" style="border: 0px;"/>
                            </h:outputLink>
                        </h:column>
                        <h:column/>
                        <p:fileUpload fileUploadListener="#{editarMusica.upload}"
                                    allowTypes="*.jpg;*.png;*.gif;*.txt;"
                                    description="Images"
                                    label="#{i18n.musica_imagem}"/>

                    </h:panelGrid>
                    <h:graphicImage id="imagem"
                                    title="clique para atualizar imagem"
                                    value="/recurso/imagem/#{editarMusica.objeto.imagem}.jpg.jspx"
                                    style="border: 0px;"/>

                    <c:video componenteID="#{editarMusica.objeto.id}" widgetID="#{editarMusica.objeto.video}"/>
                </h:panelGrid>

            </fieldset>
        </h:form>
    </ui:define>
</ui:composition>
